@import "./common";

@keyframes move {
    0% {
        transform: rotateZ(0);
    }

    50% {
        transform: rotateZ(180deg);
    }

    100% {
        transform: rotateZ(360deg);
    }
}

body {
    a {
        text-decoration: none !important;
        cursor         : pointer;
    }

    section {

        // 轮播图部分
        .banner {
            overflow: hidden;
            position: relative;
            width   : 100%;
            height  : 742px;

            ul {
                width        : 100%;
                height       : 100%;
                margin-bottom: 0;

                li {
                    position: absolute;
                    top     : 0;
                    left    : 0;
                    width   : 100%;

                    a {
                        display: block;

                        img {
                            display: block;
                            width  : 100%;
                            height : 742px;
                        }

                        video {
                            display: block;
                            width  : 100%;
                            height : 742px;
                        }
                    }


                }

                .previewing {

                    &::before {
                        content         : "";
                        position        : absolute;
                        top             : 0;
                        left            : 0;
                        width           : 100%;
                        height          : 100%;
                        background-color: rgba(0, 0, 0, 0.5);

                    }
                }

                .z-rct {
                    transition: all 0.3s;
                }
            }

            .slider_move {
                position: absolute;
                width   : 250px;
                bottom  : 30px;
                z-index : 2;

                ol {
                    height: 36px;
                    margin: 0;

                    li {
                        float      : left;
                        text-align : center;
                        width      : 50px;
                        height     : 36px;
                        line-height: 36px;
                        overflow   : hidden;
                        cursor     : pointer;
                        color      : #fff;
                        font-size  : 12px;
                    }

                    // 给li添加选中时的样式
                    .li_selected {
                        font-size: 16px;
                    }

                    ::before {
                        content         : "";
                        display         : block;
                        position        : absolute;
                        top             : 0;
                        left            : 13px;
                        right           : 13px;
                        height          : 1px;
                        background-color: #fff;
                        opacity         : 0.5;
                    }
                }

                .active_dot {
                    position              : absolute;
                    top                   : -5px;
                    left                  : 13px;
                    width                 : 24px;
                    height                : 5px;
                    background-color      : #fff;
                    border-top-left-radius: 5px;
                }
            }

            //左边
            .go_left {
                position: absolute;
                top     : 0;
                bottom  : 0;
                left    : 0;
                cursor  : pointer;
                width   : 180px;
                z-index : 2;

                &:hover>.circle {
                    animation: move 0.3s infinite;
                }

                .circle {
                    text-align      : center;
                    transition      : all, 0.5s;
                    transform-origin: 50%, 50%;

                    .iconfont {
                        height     : 742px;
                        line-height: 742px;
                        color      : #fff;
                        font-size  : 70px;
                        opacity    : 0.5;
                    }
                }

                >.iconfont {
                    position : absolute;
                    top      : 50%;
                    left     : 50%;
                    transform: translate(-50%, -50%);
                    color    : #fff;
                }
            }

            // 右边
            .go_right {
                position: absolute;
                top     : 0;
                bottom  : 0;
                right   : 0;
                cursor  : pointer;
                width   : 180px;
                z-index : 2;

                &:hover>.circle {
                    animation: move 0.5s infinite;
                }

                .circle {
                    text-align      : center;
                    transition      : all, 0.5s;
                    transform-origin: 50%, 50%;

                    .iconfont {
                        height     : 742px;
                        line-height: 742px;
                        color      : #fff;
                        font-size  : 70px;
                        opacity    : 0.5;
                    }
                }

                >.iconfont {
                    position : absolute;
                    top      : 50%;
                    left     : 50%;
                    transform: translate(-50%, -50%);
                    color    : #fff;
                }
            }
        }

        //  中间商品部分
        .product_list {
            margin-top: 40px;
            overflow  : hidden;

            a {
                position: relative;
                display : block;
                width   : 590px;
                overflow: hidden; //消除 h2  margin-top无效的情况
                color   : #111111;

                &:hover>img {
                    transform: scale(1.1);
                }

                &:first-of-type {
                    height: 662px;
                }

                &:nth-of-type(2) {
                    height: 372px;
                }

                &:last-of-type {
                    margin-top  : 20px;
                    height      : 270px;
                    padding-left: 18px;

                    h2 {
                        text-align: left;
                    }

                    span {
                        text-align: left;
                    }
                }

                img {
                    position  : absolute;
                    left      : 0;
                    top       : 0;
                    width     : 100%;
                    height    : 100%;
                    z-index   : -1;
                    transition: all 1s;
                }

                h2 {
                    font-size  : 26px;
                    margin     : 26px 0 0;
                    text-align : center;
                    font-weight: 400;
                }

                span {
                    display   : block;
                    text-align: center;
                    margin-top: 5px
                }
            }

        }

        //    购买及服务按钮
        .service {
            margin-left   : -25px;
            margin-top    : 40px;
            // height     : 220px;

            li {
                padding: 0;

                a {
                    display         : block;
                    height          : 220px;
                    margin-left     : 10px;
                    padding-top     : 60px;
                    text-align      : center;
                    background-color: #f3f3f3;
                    border-radius   : 10px;

                    &:hover {
                        background-color: #eaeaea;
                    }

                    .iconfont {
                        font-size: 55px;
                        color    : #111;
                    }

                    .title {
                        font-size: 20px;
                        color    : #333;
                    }
                }
            }
        }
    }


}